{% extends 'endbase.html' %}
{% block title %}
	留言管理
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='cs/image.css') }}">
    <script src="{{ url_for('static',filename='js/image.js') }}"></script>
    <style>
    .small-container{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    </style>
{% endblock %}

{% block body %}

<div class="container" style="height: 100vh">
    <div class="row form-horizontal" style="margin: 10px 0 30px -15px ;">
            <form action="{{ url_for('comment.search_comment') }}" method="post">
                <div class="form-group col-md-5">
                    <label for="nickname" class="control-label col-md-2 ">昵称</label>
                    <div class="col-md-10">
                        <input id="nickname" name="nickname" class="form-control" placeholder="昵称搜索" style="text-decoration: none;outline: none; font-size: 15px;" >
                    </div>
                </div>
                <div class="form-group col-md-5 job ">
                    <div class="col-md-12">
                        <label for="content" class="control-label col-md-2 ">留言</label>
                        <div class="col-md-10">
                            <input id="content" name="content" class="form-control" placeholder="留言搜索" style="text-decoration: none;outline: none; font-size: 15px;" >
                        </div>
                    </div>

                </div>

                <div class="form-group col-md-2 text-right">
                    <div class="col-md-12">
                        <button class="btn-danger btn" style="width: 80px" id="manage" name="search" value="manage">搜索</button>
                    </div>
                </div>
            </form>
    </div>

    <div class="commentlist">
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th class="col-md-1">昵称</th>
                        <th class="col-md-5">留言内容</th>
                        <th class="col-md-3">发表时间</th>
                        <th class="col-md-3">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for comment in comments %}
                    <tr>
                        <td>
                            <div class="small-container" style="margin-top: 20px;margin-bottom: 20px">
                                <div>{{ comment.nickname }}</div>
                            </div>
                        </td>
                        <td>
                            <div class="small-container">
                                <div>{{ comment.content }}</div>
                            </div>
                        </td>
                        <td>
                            <div class="small-container">
                                <div>{{ comment.create_time }}</div>
                            </div>
                        </td>
                        <td>
                            <div class="small-container">
                                <a href="#"
                                   class="edit-btn"
                                   data-toggle="modal"
                                   data-target="#myModal4"
                                   data-id="{{ comment.id }}"
                                   data-nickname="{{ comment.nickname }}"
                                   data-content="{{ comment.content }}">
                                   修改
                                </a>
                                 |
                                <a href="{{ url_for('comment.delete_comment',comment_id=comment.id) }}">删除</a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
</div>

    <!-- 留言修改模态框（Modal） -->
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
            <form  id="editForm" method="post" action="#" style="margin-left: 30px">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel4">
					留言编辑
				</h4>
			</div>
			<div class="modal-body">
                <div class="form-group">
                    <label for="nickname4">昵称</label>
                   <input id="nickname4" name="nickname4" placeholder="请输入昵称" class="form-control">
                </div>
                <div class="form-group">
                <label for="content4">留言</label>
                <textarea id="content4" name="content4" class="form-control"  placeholder="请输入留言..." style="height: 100px"></textarea>
            </div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="submit" class="btn btn-primary">保存</button>
			</div>
            </form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const editButtons = document.querySelectorAll('.edit-btn');
    const form = document.getElementById('editForm');
    const nicknameInput = document.getElementById('nickname4');
    const contentInput = document.getElementById('content4');

    editButtons.forEach(button => {
        button.addEventListener('click', function () {
            const commentId = this.dataset.id;
            const nickname = this.dataset.nickname;
            const content = this.dataset.content;

            form.action = `/comment/editComment/${commentId}`;  // 设置 form 提交地址
            nicknameInput.value = nickname;
            contentInput.value = content;
        });
    });
});
</script>

{% endblock %}